(function (window) {
  function View() {
    this.list = document.querySelector("#list");
    this.keyword = document.querySelector("#keyword");
  }

  View.prototype.render = function (data = []) {
    let str = "";
    data.forEach((item) => {
      let completed = item.completed;
      let className = completed === true ? "completed" : "";
      str += `<li class="${className}">${item.value} <button data-id="${item.id}" class="del">X</button></li>`;
    });
    this.list.innerHTML = str;
  };

  View.prototype.addAction = function (callback) {
    this.keyword.addEventListener("keyup", (e) => {
      if (e.keyCode === 13) {
        callback && callback(e.target.value);
      }
    });
  };

  View.prototype.delAction = function (callback) {
    attachEvent(this.list, ".del", "click", function (e) {
      callback && callback(e.target.dataset.id);
    });
  };
  window.View = View;
})(window);
